﻿<template>
  <div class="index_container">
    <div class="index_header">
      <div class="index_header_name">
        首页
      </div>
      <div class="index_header_dl header_btn_base" v-bind:class="{login_hidden : login_hidden_data}" v-on:click="login" v-show="!have_user_id">
        登陆
      </div>
      <div class="index_header_zc header_btn_base" v-bind:class="{login_hidden : login_hidden_data}" v-on:click="go_login" v-show="!have_user_id">
        注册
      </div>
      <div class="certain_letter" v-on:click="show_hide">
        收信确认
      </div>
    </div>
    <div class="index_main">
      <div class="door_red">
        <img src="../../../static/img/door_red.png" alt="Alternate Text" class="door_base" />
        <p class="door_w">
          披荆斩棘 只为遇见你
        </p>
      </div>
      <div class="door_blue">
        <img src="../../../static/img/door_blue.png" alt="Alternate Text" class="door_base" />
        <p class="door_w">
          救助与支援
        </p>
      </div>
      <div class="door_green">
        <img src="../../../static/img/door_green.png" alt="Alternate Text" class="door_base" />
        <p class="door_w">
          随风而动 随缘而遇
        </p>
      </div>
      <img src="../../../static/img/app_index_letter.png" class="app_index_letter"/>
      <img src="../../../static/img/new_letter_index.png" class="letter_man_e">
    </div>
    <div class="index_bottom">
      <img src="../../../static/img/index_cat.png" class="index_cat">
    </div>
    <router-view>

  </router-view>

   </div>
</template>
<script>
  import '../../../static/css/reset.css'
  import MintUI from 'mint-ui'
  import Vue from "vue"
  import '../../../static/css/mint-ui/style.css'
  import "../../../static/css/index/index_app.css"
  import useRem from '../../../static/js/use_rem.js';
  import "../../common/common.js"
  import qs from 'qs';
  import axios from 'axios'
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
  Vue.prototype.$http = axios
  Vue.use(MintUI);
  useRem();

export default {
  name: 'hello',
  data () {
    return {
      have_user_id: false,
      login_hidden_data:false
    }
  },
  mounted: function () {
    mui.plusReady(() => {
      //初始化时 固定底部
      let user_id = localStorage.getItem("user_id");
      plus.navigator.setStatusBarStyle('light');
      try {
        let temp = user_id.id;
        if (temp != " "||temp !="") {
          this.change_login_hidden_data();
        }
      } catch(e){

      }
      let index_id = plus.webview.currentWebview().id;
      localStorage.setItem("index_id", index_id)

    })

    //ajax_base__s
    sessionStorage.setItem("ajax_base","http://wx.yizhiweimeng.com/");
    //添加login_change自定义事件监听

    window.addEventListener('login_change',()=>{
      //获得事件参数
      this.change_login_hidden_data();

    });
    let user_id = localStorage.getItem("user_id");
    if (user_id != "" || user_id != null || user_id != undefined) {
      //this.have_user_id = true;
    }
    this.$nextTick(function () {
      // DOM 更新了
      setTimeout(() => {
        mui.plusReady(function () {
          plus.navigator.setStatusBarBackground("#9f5c2f");
        })
      },0)
    })
  },
  methods: {
    change_login_hidden_data: function () {

      setTimeout(() => {
        this.login_hidden_data = true;
      },0)
     console.log("setTimeout____________________________________________________")
     console.log("change_login_hidden_data____________________________________-");
     console.log(this.change_login_hidden_data);
    },
    show_hide: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/Wrap_certain_layer/Certain_layer_input", router: this.$router
        });
    },
    go_login: function () {
      if (this.login_hidden_data == true) return;
       mui.plusReady(function(){
              console.log("当前页面URL："+plus.webview.currentWebview().getURL());
              mui.openWindow({
                url: "./app_login.html",
                id: "app_login",
                show: {
                  autoShow: true,//页面loaded事件发生后自动显示，默认为true
                  aniShow: 'slide-in-bottom',//页面显示动画，默认为”slide-in-right“；

                },
              });
       })
    },
    login: function () {
      if (this.login_hidden_data == true) return;
   mui.plusReady(function(){
              console.log("当前页面URL："+plus.webview.currentWebview().getURL());
              mui.openWindow({
                url: "./app_login.html#/Wrap_login/Login",
                id: "app_login_log",
                show: {
                  autoShow: true,//页面loaded事件发生后自动显示，默认为true
                  aniShow: 'slide-in-bottom',//页面显示动画，默认为”slide-in-right“；

                },
              });
       })
   }
   },
  components: {
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  /*index_headers*/
  .index_header{
    padding-top:5.3vw
  }
  /*index_headere*/
  .login_hidden {
    opacity: 0;
  }
  * {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .letter_send_box p {
    margin-top: 11vw;
  }

  .wrap_user_img {
    width: 28vw;
    height: 28vw;
    border-radius: 50%;
    border: 2px solid #cc9966;
    margin: 0rem auto;
    background-color: #ffffff;
    margin-bottom: 0.5rem;
    position: relative;
  }
  .input_letter_id {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: #847f7f;
  }
  .wrap_letter_send_box {
    z-index: 2000;
    height: 110vw;
    width: 75%;
  }
  .letter_send_box{
    height:100%;
    width:100%;
    position:absolute;
    z-index:1000;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.6);
  }
</style>


